<template>
  <div class="container">
    <div class="input-group">
      <input type="text" v-model="question" placeholder="请输入您的需求" class="input-field">
      <el-button @click="ask" type="ptimary">获取建议</el-button>
      <el-button @click="reset" type="success">重置</el-button>
    </div>
    <div class="input-group">
      <div>建议: </div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 8}"
        v-model="answer"
        v-loading="loading">
      </el-input>
    </div>
  </div>
</template>
 
<script>
  export default {
    name: 'Advice',
    data() {
      return {
        question: '',
        answer: '',
        loading: false
      }
    },
    methods: {
      ask() {
        if(this.question === '') {
          this.$message('请输入需求');
        }else{
          this.loading = true
          this.$axios.post(this.$httpUrl + '/test/ask?question=' + this.question).then(res => {
            this.answer = res.data.result;
            this.loading = false
          }).catch(error => {
            console.error('Error', error);
          });
        }
      },
      reset(){
        this.question=""
        this.answer=""
        this.loading=false
      }
    }
  }
</script>
 
<style scoped>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
  }
  .container {
    max-width: 600px;
    margin: 100px auto;
    padding: 20px;
    /* background-color: #fff;*/
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .input-group input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    resize: both; /* Allows resizing */
  }
  .input-group input[type="text2"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    resize: both; /* Allows resizing */
  }
  .input-group button {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-left: 5px;
  }
 
  .suggestion {
    margin-top: 30px; /* Increase top margin */
    padding: 20px; /* Increase padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 20px;
  }
</style>